<template>
	<view class="content">
		<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" :show-scrollbar="false" class="left-aside">
			<view v-for="(item, index) in flist" :key="index" class="f-item-box">
				<view class="f-item" :class="{ active: index === currentIndex }" @click="switchMenu(item.id, index)">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view
			scroll-y="true"
			class="scrollBox"
			@scrolltoupper="top"
			@scrolltolower="bottom"
			lower-threshold="-80"
			upper-threshold="-80"
			enable-back-to-top
			:show-scrollbar="false"
		>
			<view class="f-banner">
				<image :src="bannerUrl" mode="aspectFill"></image>
				<!-- <u-lazy-load height="82" imgMode="widthFix" :image="bannerUrl" loading-img="/static/lazy/banner-lazy-load.png"></u-lazy-load> -->
			</view>
			<view v-for="(sitem, sindex) in slist" :key="sitem.id" class="s-list">
				<view class="cateBox">
					<text class="s-item">{{ sitem.name }}</text>
					<view class="t-list">
						<view class="t-item" v-for="(titem, tindex) in sitem.children" :key="tindex" @click="goToGoodsList(titem.queryId)">
							<image :src="titem.smallImgCard.img" mode="aspectFit" lazy-load></image>
							<image class="label" :src="titem.smallImgCard.badge"></image>
							<!-- <u-lazy-load height="128" :image="titem.image" img-mode="aspectFit"></u-lazy-load> -->
							<text>{{ titem.smallImgCard.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="search">
			<view class="input" @click="search">
				<image src="../../../static/icon/search.png"></image>
				<swiper :indicator-dots="false" autoplay :interval="3000" :duration="200" vertical circular>
					<swiper-item v-for="(item, index) in hotWords" :key="index">
						<text>{{ item.queryName }}</text>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view v-show="loadStatus" class="loading"><u-loadmore status="loading" bg-color="#f8f8f8" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0, // 预设当前项的值
			scrollTop: 0, //tab标题的滚动条位置
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			flist: [],
			slist: [],
			loadStatus: false,
			bannerUrl: '',
			hotWords: []
		}
	},
	onLoad() {
		this.getFirstCate()
		this.getHotWords()
	},
	methods: {
		search() {
			uni.navigateTo({
				url: '../../shop/search/search'
			})
		},
		getHotWords() {
			this.$u.api.placeHolder().then(res => {
				// console.log(res)
				if (res.data.length != 0) {
					this.hotWords = res.data
				} else {
					this.hotWords.push({ queryName: '搜一搜' })
				}
			})
		},
		getFirstCate() {
			this.$u.api.firstCategory().then(res => {
				// console.log(res)
				this.flist = res.data.filter(x => x.type != 1)
				this.getSecondCate(res.data[0].id)
			})
		},
		getSecondCate(catId) {
			this.$u.api.categoryDetail({catId}).then(res => {
				// console.log(res)
				this.slist = res.data.children.filter(x => x.displayType == 0)
				this.bannerUrl = res.data.banner
				this.loadStatus = false
			})
		},
		goToGoodsList(cid) {
			console.log('跳转分类ID为：' + cid)
			uni.navigateTo({
				url: '../../shop/goods/list/list?cid=' + cid
			})
		},
		// 点击左边的栏目切换
		async switchMenu(cid, index) {
			if (index == this.currentIndex) return
			this.currentIndex = index
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('left-aside', 'menuHeight')
				await this.getElRect('f-item', 'menuItemHeight')
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
			this.getSecondCate(cid)
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this)
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass)
							}, 10)
							return
						}
						this[dataVal] = res.height
					})
					.exec()
			})
		},
		top() {
			if (this.currentIndex > 0) {
				const index = this.currentIndex - 1
				this.slist = []
				this.loadStatus = true
				this.switchMenu(this.flist[index].id, index)
			}
		},
		bottom() {
			if (this.currentIndex < this.flist.length - 1) {
				const index = this.currentIndex + 1
				this.slist = []
				this.loadStatus = true
				this.switchMenu(this.flist[index].id, index)
			}
		}
	}
}
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	padding-top: 80rpx;
	display: flex;
}
.left-aside {
	flex-shrink: 0;
	width: 200rpx;
	height: 100%;
	background-color: #fff;
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 88rpx;
	font-size: 28rpx;
	color: $font-color-base;
	position: relative;
	text {
		padding: 6rpx 24rpx;
	}
	&.active {
		text {
			color: #ffffff;
			background: linear-gradient(to right, #ef4c2c, #d51110);
			border-radius: 30rpx;
		}
		// &:before {
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// 	height: 36rpx;
		// 	width: 8rpx;
		// 	background-color: $base-color;
		// 	border-radius: 0 4px 4px 0;
		// 	opacity: 0.8;
		// }
	}
}

.scrollBox {
	height: 100%;
	flex: 1;
}

.s-list {
	padding: 20rpx 20rpx 0;
}
.f-banner {
	margin: 20rpx 20rpx 0;
	// height: 82rpx;
	image {
		width: 100%;
		height: 148rpx;
		border-radius: 10rpx;
	}
}
.cateBox {
	border-radius: 12rpx;
	background-color: #fff;
}
.s-item {
	padding-left: 20rpx;
	line-height: 70rpx;
	height: 70rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: $font-color-dark;
}
.t-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-top: 12rpx;
	margin-bottom: 20rpx;
	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}
.t-item {
	position: relative;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* width: 176rpx; */
	width: 33.33%;
	font-size: 24rpx;
	color: #666;
	padding-bottom: 20rpx;
	.label {
		position: absolute;
		top: 0;
		left: 0;
		width: 50rpx;
		height: 50rpx;
	}
	image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}
	text {
		width: 100%;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.search {
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 750rpx;
	height: 80rpx;
	background-color: #fff;
	box-shadow: 2rpx 2rpx 6rpx #f2f2f2;
	.input {
		display: flex;
		align-items: center;
		width: 680rpx;
		height: 60rpx;
		background-color: rgba(240, 240, 240, 0.7);
		border-radius: 30rpx;
		color: #ada9a3;
		font-size: 26rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 30rpx 0 30rpx;
		}
		swiper {
			height: 100%;
			width: 60%;
			text {
				line-height: 60rpx;
			}
		}
	}
}
.loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
</style>
